<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ebeef5;
        }

        .header h1 {
            color: #409EFF;
            font-size: 24px;
            font-weight: 600;
        }

        .toolbar {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-input {
            width: 300px;
        }

        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .loading-overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }

        .empty-state {
            text-align: center;
            padding: 40px 0;
            color: #909399;
        }

        .empty-state-icon {
            font-size: 60px;
            margin-bottom: 15px;
            color: #C0C4CC;
        }

        .button-new {
            background: linear-gradient(45deg, #409EFF, #64b5ff);
            border: none;
            color: white;
            font-weight: bold;
        }

        .button-new:hover {
            background: linear-gradient(45deg, #64b5ff, #409EFF);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
        }

        .table-container {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
        }

        .footer {
            margin-top: 20px;
            text-align: center;
            color: #909399;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <div class="table-container">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="编号" width="100"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleCode" label="角色编码"></el-table-column>
                <el-table-column label="操作" width="300">
                    <template #default="scope">
                        <el-button
                                size="small"
                                type="primary"
                                @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                        <el-button

                                size="small"
                                type="warning"
                                @click="addPerms(scope.row)">
                            分配角色
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--        弹窗组件-->
        <div>
            <el-dialog
                    v-model="dialogVisible"
                    :title="isEdit ? '编辑角色' : '新增角色'"
                    width="500px"
                    :close-on-click-modal="false"
            >
                <el-form
                        :model="form"
                        :rules="rules"
                        ref="roleFormRef"
                        label-width="100px"
                        class="role-form"
                        status-icon
                >
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input
                                v-model="form.roleName"
                                placeholder="请输入角色名称"
                                clearable></el-input>
                    </el-form-item>

                    <el-form-item label="角色编码" prop="roleCode">
                        <el-input
                                v-model="form.roleCode"
                                placeholder="请输入角色编码"
                                clearable></el-input>
                    </el-form-item>
                </el-form>

                <template #footer>
                    <span class="form-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm">
                          确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <!--弹窗er-->
        <div>
            <el-dialog
                    v-model="dialogVisible1"
                    title="权限选择"
                    width="700px"
                    :close-on-click-modal="false"
                    class="tree-dialog"
            >
                <div class="tree-container">
                    <el-tree
                            ref="permsTree"
                            :data="data1"
                            show-checkbox
                            node-key="id"
                            :default-expanded-keys="[2, 3]"
                            :default-checked-keys="pids"
                            :props="defaultProps"></el-tree>
                </div>


                <template #footer>
                    <div class="dialog-footer">
                        <div class="select-actions">
                            <el-button @click="selectAll" class="action-button">全选</el-button>
                            <el-button @click="clearAll" class="action-button">清空</el-button>
                        </div>
                        <span>
                            <el-button @click="dialogVisible1 = false">取消</el-button>
                            <el-button type="primary" @click="confirmSelection">确定</el-button>
                        </span>
                    </div>
                </template>
            </el-dialog>
        </div>
        <!--    分页组件-->
        <div class="pagination-container">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[2, 4, 6, 8]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</div>
<script>
    const {createApp, ref, computed, onMounted,nextTick} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    createApp({
        setup() {
            //打开弹窗
            const dialogVisible1 = ref(false)
            const data1 = ref([])

            const permsTree = ref(null)
            const pids = ref();
            const rid=ref('')
            const addPerms = (row) => {
                axios.get(`/permission/${row.id}`).then(resp => {
                    //将返回searchQuery.value回来的集合数据赋值给表格绑定的数据源变量
                    rid.value=row.id
                    dialogVisible1.value = true
                   nextTick(()=>{
                       permsTree.value.setCheckedKeys([], false)
                       data1.value = resp.data.data.all;
                       pids.value = resp.data.data.permsByRid;
                   })


                })
            }


            const defaultProps = ref({
                children: 'children',
                label: 'pname'
            });

              //确定按钮
            const confirmSelection=()=>{
                let ids1= permsTree.value.getCheckedKeys();
                let ids2=permsTree.value.getHalfCheckedKeys();
                ids1=ids1.concat(ids2)
                axios.post(`/permission/${rid.value}`,ids1).then(resp => {
                    //将返回searchQuery.value回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    ElMessage.success(resp.data.msg);
                    dialogVisible.value = false;
                    total.value = resp.data.data.total;
                }).catch(error=>{
                    ElMessage.error(error.response.data.data.msg)
                })
            }


//拿到数据
            const tableData = ref([])
            const currentPage = ref(1)
            const pageSize = ref(2)
            const total = ref(1)
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getAllRoles();
            }
            const handleCurrentChange = (val) => {
                currentPage.value = val;
                getAllRoles();
            }
            onMounted(() => {
                // 模拟API调用延迟
                getAllRoles();
            });
            const getAllRoles = () => {
                axios.get(`/role/getAllRoles/${currentPage.value}/${pageSize.value}`).then(resp => {
                    //将返回searchQuery.value回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    console.log(resp.data)
                    tableData.value = resp.data.data.list;
                    total.value = resp.data.data.total;
                })
            }
            const data = (msg) => {
                ElMessage.success(msg);
                getAllRoles();
                form.value = {}
                dialogVisible.value = false
            }

            //编辑
            const form = ref([])
            const dialogVisible = ref(false)
            const title = ref("修改用户")
            const handleEdit = (row) => {
                axios.get(`/role/getrolebyid/${row.id}`)
                    .then(resp => {
                        console.log(resp.data)
                        form.value = resp.data.data;
                        dialogVisible.value = true; // 显示弹窗
                        title.value = ref("修改业主")
                    })
                    .catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
            }
            const submitForm = () => {
                updateUser();
            }
            //修改
            const updateUser = () => {
                axios.put("/role", form.value).then(resp => {
                    // 判断resp.data 是否大于1，如果大于1 则修改成功，刷新页面，关闭弹窗
                    if (resp.data.code === 200) {
                        data(resp.data.msg);
                    } else {
                        ElMessage.error(error.response.data.msg)
                    }
                })
            }
            //删除
            const handleDelete = (row) => {
                ElMessageBox.confirm(`确定要删除用户吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    // let mid = row.buildingId;
                    axios.delete(`/role/${row.id}`).then(resp => {
                        if (resp.data.code === 200) {
                            ElMessage.success(resp.data.msg);
                            getAllRoles();
                        } else {
                            alert("删除失败")
                        }
                    }).catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })
            }
            return {
                tableData, currentPage, pageSize, total, handleSizeChange, handleCurrentChange, getAllRoles,
                handleEdit, form, dialogVisible, title, handleDelete, submitForm, dialogVisible1, addPerms,
                data1, permsTree, pids
                , defaultProps,confirmSelection,rid
            }
        }
    }).use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    }).mount('#app');
</script>


</body>
</html>